<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="bootstrap-3/css/bootstrap.min.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap-3/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <style type="text/css">
      img{width: 120px;height: 180px;margin: -420px 0px 200px 450px;border: 1px solid red;}
    </style>
  </head>
  <body>
    <div style="margin: 0px auto;">
       <p><span class="glyphicon glyphicon-tower"></span>
        <span>系统设置</span><span>&gt;</span><span >&nbsp;</span><span>用户管理</span></p>
        <br>
        <div class="input-group input-group-lg" style="width:600px" >
        <span class="input-group-addon">用户名：</span>
       <input type="text" class="form-control" placeholder="Username" id="userName">
       <span class="input-group-addon">真实姓名：</span>
       <input type="text" class="form-control" placeholder="Username" id="realName">
      
       </div>
       <span style="float: right; margin: -40px 60px;">
       <button type="button" class="btn btn-info" id="search" >
       <span class="glyphicon glyphicon-search">&nbsp;搜索</span>
       </button></span>
       
       <div id="vue1">
  <table class="table table-condensed" style="border: 1px black solid;">
  <tr  class="success" style="">
    <td class="danger" colspan="6">
      <span>组织机构列表</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span style="float: right;">
      <button type="button" class="btn btn-link" data-toggle="modal" 
      data-target="#exampleModal" data-whatever="@getbootstrap" v-on:click="getMapInfo()">
        <span class="glyphicon glyphicon-plus">&nbsp;增加员工</span>
      </button>
      </span>
  </td></tr>
  <tr class="success" style="text-align: center;"> 
  <td style="width: 40px;">排序</td>
  <td>用户名</td>
  <td>角色</td>
  <td>机构/部门</td>
  <td>状态</td>
  <td class="info" style="width:180px;">操作</td>
  </tr>
  <tr class="success" style="text-align: center;" v-for="user in userList"> 
  <td style="width: 30px;">{{$index+1}}</td>
  <td>{{user.user_name}}</td>
  <td>{{user.role.role_name}}</td>
  <td>{{user.dept.dept_name}}</td>
  <td v-if="user.state==1">正常</td>
  <td v-else>冻结</td>
  <td class="info" style="width:180px;">
  
  
    
     <button type="button" class="btn btn-link" data-toggle="modal" 
     data-target="#exampleModal" data-whatever="@getbootstrap" v-on:click="getMapInfoById(user.userid)">
        <span class="glyphicon glyphicon-text-height">&nbsp;修改</span>
      </button>
      
      
      <shiro:hasPermission name="delete">
      <button type="button" class="btn btn-link" v-on:click="deleteUserById(user.userid,user.user_name)">
      <span class="glyphicon glyphicon-remove">删除</span></button>
      </shiro:hasPermission>
  
  </td>
  </tr>
</table>
    </div>
    <script type="text/javascript" src="laypage/laypage.js"></script>
    <script type="text/javascript">
    //定义两个全局变量用来获取userName 和 realName 的值
    var userName="";
    var realName="";
    var showUserInfo = new Vue({
    	el:"#vue1",
    	data:{userList:""},
    	methods:{
    		getMapInfo:function(){
    			mapInfo.getMapInfo();//给新增用户绑定一个事件，当她触发时就调用 另一个vue 的方法
    		},
    		getMapInfoById:function(userid){
    			mapInfo.getMapInfoById(userid);
    		},
    		deleteUserById:function(userid,user_name){
    			if(confirm("确定要删除"+user_name+"吗？")){
    				$.ajax({
    					url:"../user/deleteUserInfoById",
    					type:"post",
    					data:{userid:userid},
    					dataType:"text",
    					scriptCharset: "UTF-8",
    					
    					success:function(result){
    						console.log(result);
    							alert(result);
    							showUserInfo.getUserInfo(1);
    					}
    				});
    			}
    			
    		},
    		getUserInfo:function(currentPage){
    			$.ajax({
    				url:"../user/queryUserInfo",
    				type:"post",
    				data:{userName:userName,realName:realName,currentPage:currentPage},
    				dataType:"json",
    				success:function(result){
    					console.log(result);
    					showUserInfo.userList=result.userList;
    					
    					//下边是layui插件分页显示方法
    					laypage({
    						cont:$("#layPage"),//分页内容所有显示的容器位置 
    						pages:result.totalPages,//分页显示的总页数
    						curr:currentPage,//当前页
    						 skin:'molv',//皮肤
    						 skip:true,//支持跳页的功能
    						 last:'尾页',
    						 groups:2,//多少页进行分组
    						 jump:function(obj,first){//触发分页后的回调
    							 console.log("ssssssssssssssssssssssss");
    							 if(!first){//一定要加此判断，否则初始时会无限刷新
    								 showUserInfo.getUserInfo(obj.curr);//获取当前页
    							 }
    						 }
    					});
    				}
    				
    			});
    		}
    	}
    });
    //页面首次加载 默认第一页
    showUserInfo.getUserInfo(1);
    $("#search").click(function(){
    	//当点击搜索按钮时 获取 两个输入框的值
    	userName = $("#userName").val();
    	realName = $("#realName").val();
    	//调用showUserInfo.getUserInfo(1);
    	showUserInfo.getUserInfo(1);
    });
    
    
    
    </script>
    


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content" id="vue2">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">用户操作界面(新增/修改)</h4>
      </div>
      <div class="modal-body" style="width: 70%;">
        <form method="post" id="myform"> 
         
        <label class="radio-inline">  登录名：
  <input type="text" class="form-control" name="user_name" value="{{user.user_name}}"> </label><br>
  <label class="radio-inline" id="password">密码：
  <input type="password" class="form-control" name="password" value="{{user.password}}"> </label><br>
          <label class="radio-inline">真实姓名：
  <input type="text" class="form-control" name="real_name"  value="{{user.real_name}}"> </label><br>
 
       <label class="radio-inline">所在部门： 
   <select class="form-control" name="dept_id" >
    <template v-for="dept in deptList" > 
		<template v-if="user.dept_id==dept.dept_id">
			 <option value="{{dept.dept_id}}" selected="selected">{{dept.dept_name}}</option>
		</template> 
		<template v-else>
			 <option value="{{dept.dept_id}}">{{dept.dept_name}}</option>
		</template>
	</template>
</select>
</label><br>
<label class="radio-inline">性别：&nbsp;&nbsp;&nbsp;
  <template v-if="user.sex=='男'">
    <input type="radio" name="sex" id="inlineRadio1" value="男" checked="checked"> 男
  </template>
  <template v-else>
    <input type="radio" name="sex" id="inlineRadio1" value="男" > 男
  </template>
 </label>
<label class="radio-inline">
  <template v-if="user.sex=='女'">
    <input type="radio" name="sex" id="inlineRadio2" value="女" checked="checked"> 女
  </template>
  <template v-else>
    <input type="radio" name="sex" id="inlineRadio2" value="女" > 女
 </template>
</label><br>
 <label class="radio-inline">职称：&nbsp;
        <select class="form-control" name="job">
        <template v-if="user.job=='初级'">
			 <option value="初级" selected="selected">初级</option>
		</template> 
		<template v-else>
			 <option value="初级">初级</option>
		</template>
		<template v-if="user.job=='中级'">
			 <option value="中级" selected="selected">中级</option>
		</template> 
		<template v-else>
			 <option value="中级">中级</option>
		</template>
		<template v-if="user.job=='高级'">
			 <option value="高级" selected="selected">高级</option>
		</template> 
		<template v-else>
			 <option value="高级">高级</option>
		</template>
</select>
</label><br>
<label class="radio-inline"> 角色： 
        <select class="form-control" name="role_id">
    <template v-for="role in roleList" > 
		<template v-if="user.role_id==role.id">
			 <option value="{{role.id}}" selected="selected">{{role.role_name}}</option>
		</template> 
		<template v-else>
			 <option value="{{role.id}}">{{role.role_name}}</option>
		</template>
	</template>
</select>
</label><br>
  <label class="radio-inline">联系方式：
  <input type="text" class="form-control" name="phone"  value="{{user.phone}}"> 
  </label><br>
  
<label class="radio-inline">状态：&nbsp;&nbsp;&nbsp;
  <template v-if="user.state==1">
    <input type="radio" name="state" id="inlineRadio1" value=1 checked="checked"> 正常
  </template>
  <template v-else>
    <input type="radio" name="state" id="inlineRadio1" value=1 > 正常
  </template>
</label>
<label class="radio-inline">
  <template v-if="user.state==0">
    <input type="radio" name="state" id="inlineRadio2" value=0 checked="checked"> 冻结
  </template>
  <template v-else>
    <input type="radio" name="state" id="inlineRadio2" value=0 > 冻结
  </template>
</label><br>

<label class="radio-inline">
<input type="file" name="photo" id='file'; onchange="c()">
</label><br>

<template v-if="user.image != null">
<input type="text" name="image" value="../photos/{{user.image}}" style="display: none"></template>
<template v-else>
<input type="text" name="image" style="display: none"></template>

<template v-if="user.image !=null"><img src="../photos/{{user.image}}" id='show'></template>
<template v-else><img src="" id='show'></template>
     </form>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        
        <button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="addUser()">提交</button>
      </div>
     
<script type="text/javascript">
function c () {
var r= new FileReader();
f=document.getElementById('file').files[0];
r.readAsDataURL(f);
r.onload=function  () {
document.getElementById('show').src=this.result;
};
}
 var url ="";
 var mapInfo = new Vue({
	 el:"#vue2",
	 data:{roleList:"",deptList:"",user:"",userid:0},
	 methods:{
		 getMapInfo:function(){
			 console.log("我是弹出层的vue 我进来了！");
			 
			 $("#password").show();
			 url="../user/addUserInfo";
			 console.log(url);
			 $.ajax({
				 url:"../user/getMapInfo",
				 type:"post",
				 dataType:"json",
				 success:function(result){
					 console.log(result);
					 mapInfo.roleList = result.rList;
					 mapInfo.deptList = result.dList;
					 
				 }
			 });
		 },
		 addUser:function(){
			 console.log("我是提交照片的方法==="); 
			 var formdate=new FormData($("form")[0]);
			formdate.append("userid",mapInfo.userid);//在把userid 追加到formate 对象中返回后台
			 console.log(formdate); 
			 $.ajax({
				 url:url,
				 type:"post",
				 data:formdate,
				 dataType:"text",
				 contentType:false,
			     processData:false,
				 success:function(result){
					if(result=="success"){
						alert("操作成功！！！");
						showUserInfo.getUserInfo(1);
					} else{
						alert("操作失败！！！");
					}
				 }
			 });
		 },
 		getMapInfoById:function(userid){
 			mapInfo.userid=userid;//把带过来的userid 放入到vue 的属性中
			console.log(userid+"当前人员的id---我要修改---");
 			$("#password").hide();
			url="../user/modifyInfoById";
			$.ajax({
				url:"../user/getMapInfoById",
				type:"post",
				data:{userid:userid},
				dataType:"json",
				success:function(result){
					
					mapInfo.roleList = result.rList;
				    mapInfo.deptList = result.dList;
				    mapInfo.user = result.user;
				}
			});
		}
	 }
 });
</script>


   
    </div>
  </div>
</div>

<div id="layPage"></div>
  </body>
</html>
